<template>
  <view class="page">
    <u-navbar bg-color="#EFF4FF" :placeholder="true" :fixed="true" :border="false" @leftClick="open = !open"
      @rightClick="toMessage">
      <template #left>
        <u-text :suffixIcon="open ? 'arrow-up-fill' : 'arrow-down-fill'" iconStyle="margin-left: 10rpx" align="center"
          :text="studentValue.name" size="32rpx" color="#333"></u-text>
      </template>
      <template #right>
        <image src="/static/image/teacher/icon-index-bell.png" mode="aspectFit" style="width: 40rpx; height: 40rpx">
        </image>
      </template>
    </u-navbar>
    <!-- 主内容区域 -->
    <view class="main bg-grey" style="border-radius: 30rpx 30rpx 0 0;">
      <!-- 新增学生按钮 -->
      <view class="flex align-center gap">
        <view class="btn-add">
          <u-text iconStyle="margin-top:6rpx;margin-right: 10rpx;font-size: 32rpx;font-weight:bold;color: #0060E6;"
            align="center" prefixIcon="plus" bold text="新增学生" size="36rpx" color="#0060E6"
            @click="show = true"></u-text>
        </view>
        <view class="btn-check">
          <u-text iconStyle="margin-top:10rpx;margin-right: 10rpx;font-size: 36rpx;font-weight:bold;color: #FFA40C;"
            align="center" prefixIcon="checkmark" bold text="学员审核" size="36rpx" color="#FFA40C"
            @click="toReviewStudent"></u-text>
        </view>
      </view>

      <!-- 搜索框 -->
      <view class="search-box">
        <u-input fontSize="20" style="background:white;height:40rpx;" suffixIcon="search"
          suffixIconStyle="font-size: 60rpx;color:#999" placeholder="请输入学员姓名" v-model="searchValue"></u-input>
      </view>

      <!-- 班级列表 -->
      <view class="card margin-top-sm padding-top">
        <template v-for="item in 10" :key="item">
          <view class="flex align-center justify-between padding-lr gap-sm" @click="handleClick(item)">
            <view>
              <u-text bold prefixIcon="arrow-down-fill" iconStyle="margin-right: 10rpx;font-size:24rpx"
                text="托管班：一年级（A）班" size="30rpx" color="#333333"></u-text>
            </view>
            <u-text bold align="right" text="5人" size="28rpx" color="#333333"></u-text>
          </view>
          <template v-if="expandCardId.includes(item)">
            <view class="flex align-center gap padding-lr-xl margin-top" v-for="item in 2" :key="item"
              @click="toStudentDetail(item)">
              <u-avatar size="40rpx"></u-avatar>
              <u-text text="李四" size="28rpx"></u-text>
            </view>
          </template>
          <u-divider></u-divider>
        </template>
      </view>

      <up-popup :closeable="true" :show="show" @close="show = false">
        <view class="padding-xl">
          <u-button style="margin-top:40rpx" shape="circle" size="large" :color="themePrimary" text="首次创建学员"
            @click="toAddNewStudent"></u-button>
          <u-button :style="{ marginTop: '20rpx', color: themePrimary }" shape="circle" size="large"
            :color="themeTertiary" text="添加已有学员" @click="toAddExistingStudent"></u-button>
        </view>
      </up-popup>

      <!-- 校区列表 -->
      <PopupBox bgColor="linear-gradient(180deg, #EFF4FF 10%, #FFFFFF 100%)" :show="open" :top="140"
        @close="open = false">
        <view class="student-item" v-for="item in studentList" :key="item.value"
          @click.stop.prevent="changeStudent(item)">
          <u-text :text="item.name" color="#333" size="32rpx"></u-text>
          <u-icon size="32rpx" name="checkmark" v-if="studentValue.value === item.value"></u-icon>
        </view>
      </PopupBox>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import PopupBox from '@/components/PopupBox/index.vue';
import { useTheme } from '@/composables/useTheme';

const { themePrimary, themeSecondary, themeTertiary } = useTheme();
const open = ref(false); //打开学生下拉框
const searchValue = ref(''); //搜索框的值
const studentValue = ref({ name: '北大校区', value: '1' }); //学生下拉框选中的值

const expandCardId = ref([]);
const show = ref(false);
const studentList = ref([
  { name: '北大校区', value: '1' },
  { name: '西城校区', value: '2' }
]);

const changeStudent = (value) => {
  studentValue.value = value;
  open.value = false;
};
// 我的消息
const toMessage = () => {
  uni.navigateTo({
    url: '/pages/teacher/message/index'
  });
};

const handleClick = (item) => {
  console.log(item);
  if (expandCardId.value.includes(item)) {
    expandCardId.value = expandCardId.value.filter(id => id !== item);
  } else {
    expandCardId.value.push(item);
  }
};

const toAddNewStudent = () => {
  uni.navigateTo({
    url: '/pages/common/addStudent/addNewStudent'
  });
};

const toAddExistingStudent = () => {
  uni.navigateTo({
    url: '/pages/common/addStudent/addStudent'
  });
};

const toReviewStudent = () => {
  uni.navigateTo({
    url: '/pages/common/reviewStudent/reviewStudent'
  });
};

const toStudentDetail = (item) => {
  uni.navigateTo({
    url: '/pages/common/student/detail?id=' + item
  });
};

onShow(() => {
  for (let i = 0; i < 9; i++) {
    uni.setTabBarItem({
      index: i,
      visible: i > 2 && i < 6 ? true : false,
    });
  }
  uni.setTabBarStyle({
    selectedColor: '#0060E6',
    color: '#999999',
  });
});
</script>

<style lang="scss" scoped>
.student-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
  box-sizing: border-box;
}

.btn-add,
.btn-check {
  flex: 1;
  border-radius: 32rpx;
  padding: 40rpx 40rpx;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10rpx;
}

.btn-add {
  background: #EBF3FF;
}

.btn-check {
  background: #FFF1D9;
}

.search-box {
  background: #FFFFFF;
  border-radius: 32rpx;
  padding: 20rpx;
  box-sizing: border-box;
  border: solid 1px #D8D8D8;
  margin-top: 40rpx;
}

.card {
  background: white;
  border-radius: 20rpx;
  box-sizing: border-box;

  .title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 32rpx;
    color: #333;
    gap: 10rpx;
    padding: 0 30rpx;
  }
}
</style>
